<template>
	<view>
		<!-- top 注册 -->
		<view class="j_register">
			<view class="j_register_cont" @click="register">
				注册
			</view>
		</view>
		<!-- 主体 -->
		<view class="j_banner">
			<view class="j_item">
				<img src="http://127.0.0.1:7001/public/user/caidan.png" alt="">
			</view>
		</view>
		<!-- 图标 -->
		<view class="j_WEL">
			<img src="http://127.0.0.1:7001/public/user/WELCOME.png" alt="">
		</view>
		<view class="j_form">
			<u-form :model="form" ref="uForm">
				<!-- 手机号 -->
				<u-form-item prop="phone">
					<u-input v-model="form.phone" placeholder="请输入手机号" />
				</u-form-item>
				<!-- 密码 -->
				<u-form-item prop="password">
					<u-input v-model="form.password" placeholder="请输入密码" />
				</u-form-item>
			</u-form>
		</view>
		<!-- 登录button -->
		<view class="j_hutton" @click="onLogin">
			登录
		</view>
		<!-- 消息弹出提示 -->
		<view>
			<u-toast ref="uToast" />
		</view>
		<!-- 底部 忘记密码 -->
		<view class="j_bottom">
			<view class="j_register_cont">
				<text @click="forget">忘记密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					//手机号
					phone: '',
					//密码
					password: '',
				},
				rules: {
					phone: [{
							min: 6,
							message: '请输入正确手机号',
							trigger: 'change'
						},
						{
							validator: (rule, value, callback) => {

								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					//密码验证
					password: [{
						required: true,
						min: 6,
						max: 12,
						message: '密码长度在6-12之间',
						trigger: 'change'
					}],
				},
				list: []
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//忘记密码
			forget(){
				uni.navigateTo({
					url:`/pages/login/forget/forget`
				})
			},
			//注册
			register() {
				uni.navigateTo({
					url: '/pages/login/register/register'
				})
			},
			onLogin() {
				this.$api.postlogin({
					username: this.form.phone,
					password: this.form.password,
				}).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '登录成功',
						})
						uni.setStorageSync('token',res.data.token)
						uni.reLaunch({
							url: '/pages/Home/Home'
						})
					} else {
						this.$refs.uToast.show({
							title: '手机号或密码错误',
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//top 注册
	.j_register {
		width: 100%;
		height: 80upx;
		position: relative;

		//注册盒子
		.j_register_cont {
			width: 70upx;
			height: 100%;
			position: absolute;
			right: 40upx;
			line-height: 80upx;
			text-align: center;
			font-size: 30upx;
		}
	}

	//主体
	.j_banner {
		width: 100%;
		height: 400upx;
		// background: antiquewhite;
		padding: 200upx 100upx 0upx 280upx;
		box-sizing: border-box;

		.j_item {
			width: 200upx;
			height: 200upx;

			// background: darkblue;
			img {
				width: 100%;
			}
		}
	}

	//宣传
	.j_WEL {
		width: 100%;
		height: 100upx;
		text-align: center;
		line-height: 130upx;
		margin-bottom: 80upx;

		img {
			width: 350upx;
		}
	}

	//登录
	.j_logins {
		width: 100%;
		height: 80upx;
		// background: antiquewhite;
	}

	//button
	.j_hutton {
		width: 90%;
		height: 80upx;
		background: #FFD79D;
		margin: 0 auto;
		margin-top: 50upx;
		border-radius: 10upx;
		text-align: center;
		line-height: 80upx;
		color: white;
	}

	//bottom 忘记密码
	.j_bottom {
		width: 100%;
		height: 80upx;
		position: absolute;
		bottom: 0;

		.j_register_cont {
			width: 140upx;
			height: 100%;
			position: absolute;
			right: 40upx;
			line-height: 80upx;
			text-align: center;
			font-size: 30upx;
		}
	}

	//表单
	.j_form {
		padding: 0 20upx 0 20upx;
		box-sizing: border-box;
	}
</style>
